<template>
	<div class="container">
		<Card class="no-shadow" style="width:90%; margin:0 auto;">
	        <a href="javascript:;" :class="{'is-active':category.id == q && !k}" class="category" v-for="category in categoryList" @click="filterNews(category.id)">{{category.name}}</a>
	        <a href="javascript:;" :class="{'is-active':item.key == k}" class="category" v-for="item in newsCondition" @click="filterNews(item.key)">{{item.name}}</a>
	    </Card>
	    <!-- <Card class="no-shadow" style="width:90%; margin:0 auto;">
	        <a href="javascript:;" :class="{'is-active':item.key == k}" class="category" v-for="item in newsCondition" @click="filterNews(item.key)">{{item.name}}</a>
	    </Card> -->
	    <section class="news-containter">
			<div class="news-item" v-for="item in table.list" v-if="table.total != 0">
				<div class="title">{{item.name}}</div>
				<div class="sundry">
					<span class="type" v-if="item.category">{{item.category?item.category.data.name : ''}}</span>
					<span class="time">{{item.inTimes}}</span>
					<span class="browse">
						<Icon type="eye" size="14"></Icon>
						<span>{{item.browse_number}}</span>
					</span>
				</div>
				<div class="content">{{item.content}}</div>
				<a :href="'/news-content?q='+item.id" class="read">阅读全文</a>
				<a :href="'/news-content?q='+item.id" class="mobile-btn"></a>
			</div>
			<div class="no-more" v-if="table.total == 0">暂无相关新闻</div>
	    </section>
	    <Page class="pagination"
	    	:current="table.page"
	    	:total="table.total"
	    	:page-size="table.size"
	    	@on-change="handlePage"
	    	size="small"
	    	v-show="table.total != 0">
	    </Page>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				categoryList:[],
				table:{
					list:[],
					page:Number(this.$route.query.page) || 1,
					size:15,
					total:0
				},
				newsCondition:[
					{name:'热门推荐',key:'HOST'},
					/*{name:'通知公告',key:'NOTICE'},
					{name:'招聘注册',key:'ACUTE'},*/
				],
				q:this.$route.query.q || '',//法规id
				k:this.$route.query.k || '',//新闻类型
				s:this.$route.query.s || '',//关键词
			}
		},
		mounted(){
			this.initCategory();
			if(this.s){
				this.initByKeyword();
			}else{
				this.initNews();
			}
		},
		watch:{
			$route(){
				this.s = this.$route.query.s;
                if(this.s){
					this.initByKeyword();
                }else{
					this.initNews();
				}
			}
		},
		methods:{
			initCategory(){
				this.$http.get('/nc/list',{
					params:{
						fe:1
					}
				}).then(response => {
					this.categoryList = response.data.data;
					this.categoryList.unshift({
						name:'全部',
						id:'',
					})
				}).catch(err => {

				})
			},
			filterNews(conditions){
				if(typeof(conditions) == 'number'){
					this.q = conditions;
					this.k = '';
						this.$router.push({
						path:this.$route.path,
						query:{
							page:this.table.page,
							q:this.q
						}
					})
				}else{
					this.k = conditions;
					this.q = '';
						this.$router.push({
						path:this.$route.path,
						query:{
							page:this.table.page,
							k:this.k
						}
					})
				}
			},
			handlePage(val){
				this.table.page = val;
				this.$router.push({
					path:this.$route.path,
					query:{
						page:this.table.page,
						q:this.q
					}
				})
			},
			initNews(){
				this.$http.get('/news/list',{
					params: {
						page: this.table.page,
						category:  this.q,
						include:'category',
						fe:1,
						status:this.k
					}
				}).then(res => {
					this.table.list = res.data.data;
					var reg = new RegExp("<[^<]*>", "gi");
					this.table.list.forEach((item, index)=>{
						item.content = item.content.replace(reg, "")
					})
					this.table.page = res.data.meta.pagination.current_page;
					this.table.total = res.data.meta.pagination.total;
				}).catch(err => {

				})
			},
			initByKeyword(){
				this.$http.post('/searchNew',{
                    keyword:this.s
                })
                .then(res=>{
                	// var data = res.data;
                    this.table.list = res.data.data;
					this.table.page = res.data.meta.pagination.current_page;
					this.table.total = res.data.meta.pagination.total
                })
                .catch(err=>{
                	console.log(err)
                })
			}
		}
	}
</script>
<style scoped>
	strong{ font: normal;}
	.container{ max-width:1200px; margin:16px auto;}
	.category{ display:inline-block; padding: 5px 8px; margin-right:20px;transition:all 0.2s ease-out;}
	.category:hover,.category.is-active{ background:#14a88c; color:#fff; border-radius:3px;}
	.news-containter{ width:90%; margin:50px auto 0; }
	.news-item{ height:170px; background:#f7f7f7; padding:20px 34px; position: relative; margin-bottom:20px;}
	.sundry{ margin-top:13px; margin-bottom:10px;}
	.title{ font-size:16px;}
	.type{ font-size:12px; padding:3px 14px; background: #15ccac; color:#fff; border-radius:3px; margin-right:20px; display:inline-block;}
	.time{ margin-right:20px; color:#999; }
	.browse{ color:#999;}
	.content{ color:#666; line-height:22px; font-size:16px; text-indent: 2em;
		height:44px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
	}
	.content img{ display:none !important; }
	.read{ position: absolute; right:34px; bottom:20px; color:#14a88c;}
	.read:hover{ color:#15ccac;}
	.no-more{ text-align:center; color:#ccc;}
	@media (max-width: 1024px){
		.content{ display:none;}
		.news-item{ height:inherit;}
		.read{ display:none;}
		.sundry{ margin-bottom:0;}
		.news-containter{ margin-top:20px; }
		.mobile-btn{ position: absolute; width:100%; height:100%; top:0; left:0; }
	}
</style>
